import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from '@/stores';
import 'normalize.css';
import './assets/main.css';
import { Lazyload, Uploader } from 'vant';

// 桌面端选择器适配
import '@vant/touch-emulator';

// Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法自动引入对应的样式，因此需要手动引入样式。
import 'vant/es/toast/style';
import 'vant/es/dialog/style';
import 'vant/es/notify/style';
import 'vant/es/image-preview/style';
import 'taro-ui/dist/style/index.scss'; // 引入组件样式 - 方式一

// 调试工具
if (import.meta.env.DEV) {
  // new VConsole();
}

const app = createApp(App);

app.use(pinia);
app.use(router);
app.use(Lazyload);
app.use(Uploader);

app.config.globalProperties.BASE_STATIC_FILE = import.meta.env.VITE_CDN_BASE_PATH;
// /* 自定义指令钩子 */
app.directive('bg-url', {
  beforeMount(el, binding) {
    const url = new URL(binding.value);
    el.style.setProperty(
      'background-image',
      `url(${import.meta.env.VITE_CDN_BASE_PATH + url.pathname})`
      // "important"
    );
  },
});

app.mount('#app');
